<template>
  <div class="nbox1 nopd">
    <m-menu :val="val" :data="val.menu" />

    <div class="page">
      <div @click="set.page(1)">首页</div>
      <van-pagination
        @change="set.page"
        v-model="val.page"
        :page-count="val.maxpage"
        :show-prev-button="false"
        :show-next-button="false"
      />
      <div>
        <div class="dfc g8" v-if="cfg.mobile == false">
          <div></div>
          <div class="flex g8">
            <n-button size="small" @click="set.mode('single')">单列模式</n-button>
            <n-button size="small" @click="set.mode('multi')">多列模式</n-button>
          </div>
        </div>
      </div>
    </div>
    <div class="gap gap2 pd3 pt0" :class="`mode_${val.mode}`">
      <div class="box nbg3 _box" v-for="item in val.data">
        <div class="dfc c4 _tips tsd">
          <div>
            [<n-time unix :time="item.log_time" format="MM-dd HH:mm" />]
            {{ item.user_name }}
          </div>
          <div class="txc psr dfc g8">
            <img v-if="item.fever == 1" class="_fever" :src="img_fever" />
            {{ item.boss_name }}
          </div>
        </div>
        <div class="dfc modepd _list">
          <div class="flex flexc gap2">
            <div class="flex gap1 pdl1">
              <template v-for="item in item?.icon?.split(',')">
                <img class="_roleava avacss1" :src="cfg.function.ava(item)" />
              </template>
            </div>
            <div class="_damage c1 tsd2">{{ item.damage.toLocaleString() ?? 0 }}</div>
          </div>
          <div class="boss_img">
            <img
              :src="`${cfg.cdn2}?file=${cfg.bossnamelist?.[item.boss_name]?.icon}&h=100`"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="css" scoped>
.boss_img {
  background-color: var(--nbg3);
  width: 185px;
  height: 65px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

._fever {
  height: 20px;
}
._box {
  padding: var(--pd1);
}
._roleava {
  width: var(--ava2);
  height: var(--ava2);
}
._tips {
  height: 2em;
  background-color: rgb(255 255 255 / 10%);
  margin-bottom: 8px;
  padding-left: 8px;
  padding-right: 8px;
}
._damage {
  font-weight: 900;
  font-size: 1.2em;
  letter-spacing: 1px;
}

.mode_multi {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--g3);
}

.mode_multi .boss_img {
  display: none;
}

.mode_multi ._roleava {
  width: var(--ava2);
  height: var(--ava2);
}

.mode_multi .modepd {
  padding: var(--pd2);
  justify-content: center;
}

.mode_multi .pdl1 {
  padding-left: 0;
}

@media (max-width: 768px) {
  .boss_img {
    width: 120px;
    height: 65px;
  }
  ._roleava {
    width: var(--ava2);
    height: var(--ava2);
  }
  ._damage {
    font-size: 1.1em;
  }
}
@media (max-width: 480px) {
  ._roleava {
    width: var(--avavw);
    height: var(--avavw);
  }
  ._damage {
    font-size: 3.5vw;
  }
  .boss_img {
    width: 13vw;
    height: 13vw;
  }
  .boss_img img {
    height: 12vw;
  }
  ._tips {
    font-size: 3.5vw;
  }
}
</style>
<script>
import { cfg } from "@/cfg/cfg.js";
import newdao from "./gh_comp_newdao.vue";
import { nextTick } from "vue";
import img_fever from "@/assets/img/battle/fever-on.svg";
export default {
  props: {
    tjval: {
      type: Object,
      required: false,
    },
  },
  setup(props) {
    const sval = props.tjval;
    const set = {
      func: (item, value) => {
        if (value == "off") {
          nextTick(() => {
            if (cfg.mobile == false) {
              val[item.value] = null;
            } else {
              val[item.value] = undefined;
            }
            set.getlist();
          });

          return;
        }
        switch (item.value) {
          default: {
            val.page = 1;
            val[item.value] = value;
            set.getlist();
            break;
          }
        }
      },
      //初始化数据
      init: () => {
        val.dao = sval.guild_data.dao?.slice();
        const boss = sval.guild_data?.info;
        const date = sval.guild_data?.date;
        const user = sval.guild_data?.user_arr;
        val.zk = null;
        val.maotime = null;
        val.bossname = null;
        val.username = null;
        //筛选首领
        val.menu[2].list = [
          {
            text: `停用筛选`,
            value: `off`,
          },
        ];
        for (let index = 0; index < boss.length; index++) {
          const item = boss[index];
          val.menu[2].list.push({
            text: item.boss_name,
            value: item.boss_name,
          });
        }
        //日期
        val.menu[3].list = [
          {
            text: `停用筛选`,
            value: `off`,
          },
        ];
        for (let index = 0; index < date.length; index++) {
          const item = date[index];
          val.menu[3].list.push({
            text: item,
            value: item,
          });
        }
        //人员
        val.menu[4].list = [
          {
            text: `停用筛选`,
            value: `off`,
          },
        ];
        for (let index = 0; index < user.length; index++) {
          const item = user[index];
          val.menu[4].list.push({
            text: item.user_name,
            value: item.user_id,
          });
        }
        //按照log_time大小排序
        val.dao.sort((b, a) => a.log_time - b.log_time);
        val.page = 1;
        set.getlist();
      },
      mode: (mode) => {
        val.mode = mode;
        if (mode == "multi") {
          val.limit = 30;
        } else {
          val.limit = 21;
        }
        set.getlist();
      },
      page: (page) => {
        val.page = page;
        set.getlist();
      },
      //获取列表
      getlist: () => {
        const dao = val.dao?.slice();
        const sort = val.sort || null;
        const fever = val.fever || null;
        const boss = val.bossname || null;
        const date = val.maotime || null;
        const user_id = val.username || null;
        const zk = val.zk || null;
        //筛选主控
        if (sort == "dmg") {
          dao.sort((a, b) => b.damage - a.damage);
        } else {
          dao.sort((a, b) => b.log_time - a.log_time);
        }
        if (fever == "only") {
          //移除dao.fever 不等于 1的数据
          for (let i = dao.length - 1; i >= 0; i--) {
            if (dao[i].fever != 1) {
              dao.splice(i, 1);
            }
          }
        } else {
          if (fever == "hide") {
            //移除dao.fever 等于 1的数据
            for (let i = dao.length - 1; i >= 0; i--) {
              if (dao[i].fever == 1) {
                dao.splice(i, 1);
              }
            }
          } else {
            //显示全部 不操作
          }
        }
        //筛选boss
        if (boss != null) {
          for (let i = dao.length - 1; i >= 0; i--) {
            if (dao[i].boss_name != boss) {
              dao.splice(i, 1);
            }
          }
        }
        //筛选日期
        if (date != null) {
          for (let i = dao.length - 1; i >= 0; i--) {
            if (dao[i].mao_time != date) {
              dao.splice(i, 1);
            }
          }
        }
        //筛选人员
        if (user_id != null) {
          for (let i = dao.length - 1; i >= 0; i--) {
            if (dao[i].user_id != user_id) {
              dao.splice(i, 1);
            }
          }
        }

        //筛选主控
        if (val.zk != null) {
          for (let i = dao.length - 1; i >= 0; i--) {
            if (dao[i].zk != zk) {
              dao.splice(i, 1);
            }
          }
        }

        const page = val.page;
        const limit = val.limit;
        const start = (page - 1) * limit;
        const end = start + limit;
        val.data = dao.slice(start, end);
        val.maxpage = Math.ceil(dao.length / limit);
      },
    };
    const val = reactive({
      page: 1,
      limit: 21,
      sort: "time",
      fever: "show",
      mode: "single",
      dao: [],
      data: [],
      menu: [
        {
          func: set.func,
          name: "排序方式",
          bname: "排序",
          icon: `arrow-down`,
          value: `sort`,
          type: `select`,
          list: [
            {
              text: `按时间排序`,
              value: `time`,
            },
            {
              text: `按伤害排序`,
              value: `dmg`,
            },
          ],
        },
        {
          func: set.func,
          name: "炽热设置",
          bname: "炽热",
          icon: `arrow-down`,
          value: `fever`,
          type: `select`,
          list: [
            {
              text: `显示炽热数据`,
              value: `show`,
            },
            {
              text: `只看炽热数据`,
              value: `only`,
            },
            {
              text: `隐藏炽热数据`,
              value: `hide`,
            },
          ],
        },
        {
          func: set.func,
          name: "筛选首领",
          bname: "首领",
          icon: `filter-o`,
          value: `bossname`,
          type: `select`,
          list: [
            {
              text: `停用筛选`,
              value: `off`,
            },
          ],
        },
        {
          func: set.func,
          name: "筛选日期",
          bname: "日期",
          icon: `filter-o`,
          value: `maotime`,
          type: `select`,
          list: [
            {
              text: `停用筛选`,
              value: `off`,
            },
          ],
        },
        {
          func: set.func,
          name: "筛选人员",
          bname: "人员",
          icon: `filter-o`,
          value: `username`,
          type: `select`,
          list: [
            {
              text: `停用筛选`,
              value: `off`,
            },
            {
              text: `dasdsa`,
              value: `1221`,
            },
          ],
        },
        {
          func: set.func,
          name: "筛选主控",
          bname: "主控",
          icon: `filter-o`,
          value: `zk`,
          type: `role_ghz`,
        },
      ],
    });
    //检测sval.guild_data.info变化重置数据
    watch(
      () => sval.guild_data.info,
      () => {
        set.init();
      }
    );
    onMounted(async () => {
      sval.navname = "战斗记录";
      set.init();
      sval.guild_data.set.check_guilddata();
    });
    return { newdao, sval, cfg, set, val, img_fever };
  },
};
</script>
